<template>
  <div>
    <Header />
    <van-empty description="暂无数据" v-if="!tabList.length" />
    <van-swipe-cell v-show="tabList.length">
      <van-swipe-cell v-for="(item, index) in tabList" :key="index">
        <div class="home_list">
          <div class="home_img">
            <img :src="item.img[0]" alt v-if="item.img" />
            <img src="../../assets/img/demo.png" alt v-else />

            <p class="state">即将拍卖</p>
            <!-- <p class="discount">5.3折</p> -->
          </div>

          <div class="home_details">
            <p class="address">{{ item.title }}</p>
            <p class="details">
              {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅 ·
              {{ item.coveredArea }}㎡ · {{ item.directionName }}
            </p>
            <p>
              <span class="shooting">
                起拍：
                <span class="price">{{ item.startSalePrice }}万</span>
              </span>
              <span class="market">市场参考:{{ item.marketSalePrice }}万</span>
            </p>
            <p class="shooting_time">
              <span class="title">开拍</span>
              <span class="time">{{item.startSaleTimeStr}}</span>
            </p>
          </div>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="OnMylist(item)"
            v-if="text == '我的关注'||text == '我的足迹'"
          />
        </template>
      </van-swipe-cell>
    </van-swipe-cell>
    <p @click="Onmore" class="Onmore" v-if="text == true">查看更多</p>
    <Footer />
  </div>
</template>
<script>
import rem from "@/assets/js/rem.js";
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
import List from "@/components/m_file/list.vue";
export default {
  data() {
    return {
      text: "",
      page: 1,
      text: true,
      userId: sessionStorage.getItem("userId"),
      totalPage: "",
      tabList: []
    };
  },
  mounted() {
    console.log(this.$route.params);
    this.text = this.$route.params.text;
    this.Onlist();
  },
  methods: {
    Onmore() {
      if (this.page <= this.totalPage) {
        this.page += 1;
        this.Onlist();
      } else {
        this.text = false;
      }
    },
    Onlist() {
      if (this.text == "我的足迹") {
        this.OngetList();
      } else if (this.text == "我的关注") {
        this.OnhouseFollow();
      } else if (this.text == "我的订阅") {
        this.OnmySubscribe();
      } else if (this.text == "拍卖提醒") {
        this.OngetRemind();
      }
    },
    OnMylist(val) {
      if (this.text == "我的关注") {
        this.instance
          .cancelHouseFollow({
            id: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.tabList = [];
              this.OnhouseFollow();
            }
          })
          .catch(function(error) {});
      } else if (this.text == "我的足迹") {
        this.instance
          .cancelHouseBrowse({
            houseId: val.id,
            userId: Number(this.userId)
          })
          .then(res => {
            if (res.data.code == "0") {
              this.tabList = [];
              this.OngetList();
            }
          })
          .catch(function(error) {});
      }
    },
    OngetRemind() {
      const that = this;
      this.instance
        .getRemindHouseList({
          page: this.page,
          limit: 9
        })
        .then(res => {
          if (res.data.code == 0) {
            that.tabList = res.data.data;
            that.tabList.forEach((item, index) => {
              if (item.imgUrl) {
                item.img = item.imgUrl.split(",");
              }
            });
            that.totalPage = res.data.page;
            if (that.page == that.totalPage) {
              that.text = false;
            }
          }
        })
        .catch(function(error) {});
    },
    OnmySubscribe() {
      const that = this;
      this.instance
        .mySubscribe({
          telephone: sessionStorage.getItem("photo"),
          page: this.page,
          limit: 9
        })
        .then(res => {
          if (res.data.code == 0) {
            that.tabList = res.data.data;
            that.totalPage = res.data.page;
            if (that.page == that.totalPage) {
              that.text = false;
            }
            that.tabList.forEach((item, index) => {
              if (item.imgUrl) {
                item.img = item.imgUrl.split(",");
              }
            });
          }
        })
        .catch(function(error) {});
    },
    OngetList() {
      const that = this;
      this.instance
        .getList({
          page: this.page,
          limit: 9
        })
        .then(res => {
          if (res.data.code == 0) {
            that.totalPage = res.data.page;
            if (that.page == that.totalPage) {
              that.text = false;
            }
            that.tabList = res.data.data;
            console.log(that.tabList);
            that.tabList.forEach((item, index) => {
              if (item.imgUrl) {
                console.log(item.imgUrl.split(","));
                item.img = item.imgUrl.split(",");
                console.log(img);
              }
            });
          }
        })
        .catch(function(error) {});
    },
    OnhouseFollow() {
      const that = this;
      this.instance
        .houseFollow({
          page: this.page,
          limit: 9
        })
        .then(res => {
          if (res.data.code == 0) {
            that.totalPage = res.data.page;
            if (that.page == that.totalPage) {
              that.text = false;
            }
            that.tabList.forEach((item, index) => {
              if (item.imgUrl) {
                item.img = item.imgUrl.split(",");
              }
            });
            that.tabList = res.data.data;
          }
        })
        .catch(function(error) {});
    }
  },
  components: {
    Header,
    Footer,
    List
  }
};
</script>
<style lang="less" scoped>
.delete-button {
  height: 100%;
}
.home_list {
  display: flex;
  overflow: hidden;
  padding: 0.2rem 0.15rem;
  .home_img {
    position: relative;
    img {
      float: left;
      width: 1.05rem;
      height: 0.8rem;
      border-radius: 10px;
    }
    .state {
      position: absolute;
      top: 0;
      left: 0;
      // width: 0.52rem;
      height: 0.16rem;
      padding: 2px;
      border-radius: 10px 0px 10px 0px;
      background: linear-gradient(0deg, #1aaa6c, #3cd6a2, #3cd8a4);
      text-align: center;
      line-height: 0.16rem;
      color: #fff;
      font-size: 0.1rem;
    }
    .discount {
      position: absolute;
      left: 0.8rem;
      font-size: 0.1rem;
      color: #fff;
      width: 0.13rem;
    }
  }
  .home_details {
    flex: 1;
    font-size: 0.1rem;
    width: 2.13rem;
    float: left;
    margin-left: 0.16rem;
    // margin-bottom: 0.3rem;
    .address {
      font-size: 0.14rem;
      font-weight: bold;
      color: #343434;
    }
    .details {
      font-size: 0.12rem;
      color: #22242d;
      margin: 0.07rem 0;
    }
    .shooting {
      color: #f87254;
      margin-right: 0.17rem;
    }
    .price {
      font-size: 0.15rem;
    }
    .market {
      color: #9a9a9a;
    }
    .shooting_time {
      width: 1.8rem;
      height: 0.2rem;
      line-height: 0.2rem;
      background: #f3f3f3;
      border-radius: 18px;
      margin-top: 0.08rem;
      .title {
        color: #fff;
        background: #f5643e;
        padding: 0rem 0.09rem;
        border-radius: 18px 0px 0px 18px;
      }
      .time {
        color: #343434;
      }
    }
  }
}
.van-empty {
  min-height: 3.5rem;
}
</style>
